<template>
    <view class="reserve-page">
        <!-- 顶部婚纱信息卡片 -->
        <view class="dress-card">
            <image 
                :src="`http://localhost:8080/download/${dress.images?.split(',')[0]}`" 
                class="dress-image" 
                mode="aspectFill"
            />
            <view class="dress-details">
                <text class="dress-title">{{dress.title}}</text>
                <text class="dress-desc">{{dress.description || '暂无描述'}}</text>
                <view class="price-row">
                    <text class="price-label">价格</text>
                    <view class="price-box">
                        <text class="currency">¥</text>
                        <text class="price">{{dress.price}}</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 预约表单 -->
        <scroll-view scroll-y class="content-scroll">
            <view class="form-section">
                
                <text class="section-title">填写预约信息</text>
                
                <view class="form-item">
                    <text class="label">预约时间</text>
                    <picker 
                        mode="date" 
                        :value="form.reserveDate" 
                        @change="onDateChange"
                        class="date-picker"
                    >
                        <view class="picker-value">
                            <text>{{form.reserveDate || '请选择预约时间'}}</text>
                            <text class="iconfont icon-calendar">📅</text>
                        </view>
                    </picker>
                </view>

                <view class="form-item">
                    <text class="label">联系人</text>
                    <input 
                        type="text" 
                        v-model="form.address" 
                        placeholder="请输入联系人姓名"
                        placeholder-class="input-placeholder"
                        class="form-input"
                    />
                </view>

                <view class="form-item">
                    <text class="label">联系电话</text>
                    <input 
                        type="number" 
                        v-model="form.phone" 
                        placeholder="请输入联系电话"
                        placeholder-class="input-placeholder"
                        class="form-input"
                    />
                </view>

                <view class="form-item">
                    <text class="label">备注信息</text>
                    <textarea 
                        v-model="form.bz" 
                        placeholder="请输入备注信息（选填）"
                        placeholder-class="input-placeholder"
                        class="form-textarea"
                    />
                </view>
            </view>
        </scroll-view>

        <!-- 底部提交按钮 -->
        <view class="bottom-bar">
            <view class="total-price">
                <text class="price-label">总计</text>
                <view class="price-value">
                    <text class="currency">¥</text>
                    <text class="amount">{{dress.price}}</text>
                </view>
            </view>
            <button class="submit-btn" @tap="submitReserve">立即预约</button>
        </view>
    </view>
</template>

<script>
import API from '@/api/config.js'

export default {
    data() {
        return {
            dress: {},
            form: {
                userId: null,
                bridalGownId: null,
                orderId: '',
                price: null,
                address: '',
                phone: '',
                bz: '',
                status: 0,
                reserveDate: ''
            }
        }
    },
    
    onLoad(options) {
        console.log('页面加载参数:', options)
        
        if (options.dress) {
            try {
                this.dress = JSON.parse(decodeURIComponent(options.dress))
                console.log('解析的婚纱信息:', this.dress)
                
                this.form.bridalGownId = this.dress.id
                this.form.price = this.dress.price
                
                console.log('设置表单初始数据:', {
                    bridalGownId: this.form.bridalGownId,
                    price: this.form.price
                })
            } catch (error) {
                console.error('解析婚纱信息失败:', error)
                this.showToast('加载商品信息失败')
            }
        } else {
            console.warn('未接收到婚纱信息')
        }
        
      
        
        
    },
    
    methods: {
        onDateChange(e) {
            this.form.reserveDate = e.detail.value
        },
        validateForm() {
            console.log('开始表单验证，当前表单数据:', this.form)
            
            const validations = [
                { field: 'reserveDate', message: '请选择预约时间' },
                { field: 'address', message: '请输入联系人' },
                { field: 'phone', message: '请输入联系电话' }
            ]
            
            for (const validation of validations) {
                if (!this.form[validation.field]?.trim()) {
                    console.warn(`表单验证失败: ${validation.field} 为空`)
                    this.showToast(validation.message)
                    return false
                }
            }
            
            // 手机号格式验证
            if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
                console.warn('手机号格式验证失败:', this.form.phone)
                this.showToast('请输入正确的手机号')
                return false
            }
            
            console.log('表单验证通过')
            return true
        },
        
        async submitReserve() {
            console.log('开始提交预约')
            
            if (!this.validateForm()) {
                console.warn('表单验证未通过，终止提交')
                return
            }
            
            const token = uni.getStorageSync('token')
            if (!token) {
                console.warn('未获取到token')
                this.showToast('请先登录')
                return
            }
            
            try {
                uni.showLoading({ title: '提交中...', mask: true })
                
                // 生成订单号
                this.form.orderId = new Date().getTime().toString()
                console.log('生成订单号:', this.form.orderId)
                
                const requestData = {
                    userId: this.form.userId,
                    bridalGownId: this.form.bridalGownId,
                    orderId: this.form.orderId,
                    price: this.form.price,
                    address: this.form.address,
                    phone: this.form.phone,
                    bz: this.form.bz,
                    status: this.form.status,
                    reserveDate: this.form.reserveDate
                }
                
                console.log('准备发送的数据:', requestData)
                console.log('请求URL:', API.RESERVE_ADD)
                
                const res = await uni.request({
                    url: API.RESERVE_ADD,
                    method: 'POST',
                    header: {
                        'Authorization': token,
                        'Content-Type': 'application/json'
                    },
                    data: requestData
                })
                
                console.log('服务器响应:', res)
                
                if (res.data.code === 200) {
                    console.log('预约提交成功')
                    uni.showToast({ title: '预约成功', icon: 'success' })
                    setTimeout(() => {
                        uni.redirectTo({ url: '/pages/appointment/appointment' })
                    }, 1500)
                } else {
                    throw new Error(res.data.message || '预约失败')
                }
            } catch (error) {
                console.error('预约提交失败:', error)
                this.showToast(error.message || '预约失败，请重试')
            } finally {
                uni.hideLoading()
            }
        },
        
        showToast(title) {
            console.log('显示提示:', title)
            uni.showToast({
                title,
                icon: 'none'
            })
        }
    }
}
</script>

<style scoped>
.reserve-page {
    min-height: 100vh;
    background: #000;
    padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
    box-sizing: border-box;
}

.dress-card {
    margin: 30rpx;
    border-radius: 20rpx;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
}

.dress-image {
    width: 100%;
    height: 400rpx;
    display: block;
}

.dress-details {
    padding: 24rpx;
}

.dress-title {
    font-size: 32rpx;
    color: #fff;
    font-weight: 500;
    margin-bottom: 12rpx;
    display: block;
}

.dress-desc {
    font-size: 26rpx;
    color: rgba(255,255,255,0.6);
    margin-bottom: 20rpx;
    display: block;
    line-height: 1.6;
}

.price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20rpx;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.price-label {
    font-size: 26rpx;
    color: rgba(255,255,255,0.6);
}

.price-box {
    display: flex;
    align-items: baseline;
}

.currency {
    font-size: 24rpx;
    color: #e0b080;
    margin-right: 4rpx;
}

.price {
    font-size: 40rpx;
    color: #e0b080;
    font-weight: 600;
}

.content-scroll {
    padding: 0 20rpx;
    box-sizing: border-box;
}

.form-section {
    background: rgba(255,255,255,0.05);
    border-radius: 20rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
}

.section-title {
    font-size: 32rpx;
    color: #fff;
    margin-bottom: 24rpx;
    display: block;
    font-weight: 500;
    position: relative;
    padding-left: 16rpx;
}

.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6rpx;
    height: 24rpx;
    background: linear-gradient(135deg, #e0b080, #d4946f);
    border-radius: 3rpx;
}

.form-item {
    margin-bottom: 24rpx;
    box-sizing: border-box;
}

.label {
    font-size: 26rpx;
    color: rgba(255,255,255,0.6);
    margin-bottom: 8rpx;
    display: block;
    padding-left: 4rpx;
}

.date-picker {
    width: 100%;
}

.picker-value {
    height: 88rpx;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12rpx;
    padding: 0 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 28rpx;
}

.form-input {
    width: 100%;
    height: 88rpx;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12rpx;
    padding: 0 20rpx;
    color: #fff;
    font-size: 28rpx;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-input:focus {
    border-color: rgba(224,176,128,0.5);
    background: rgba(255,255,255,0.08);
}

.form-textarea {
    width: 100%;
    height: 180rpx;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12rpx;
    padding: 16rpx 20rpx;
    color: #fff;
    font-size: 28rpx;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.form-textarea:focus {
    border-color: rgba(224,176,128,0.5);
    background: rgba(255,255,255,0.08);
}

.input-placeholder {
    color: rgba(255,255,255,0.3);
}

.bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(17,17,17,0.95);
    padding: 20rpx;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(20px);
    box-sizing: border-box;
}

.total-price {
    flex: none;
    padding-left: 10rpx;
}

.price-value {
    display: flex;
    align-items: baseline;
}

.amount {
    font-size: 36rpx;
    color: #e0b080;
    font-weight: 500;
    margin-left: 4rpx;
}

.submit-btn {
    flex: 1;
    margin-left: 24rpx;
    height: 88rpx;
    background: linear-gradient(135deg, #e0b080, #d4946f);
    border: none;
    border-radius: 44rpx;
    color: #000;
    font-size: 32rpx;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4rpx 12rpx rgba(224,176,128,0.3);
}

.submit-btn:active {
    opacity: 0.9;
    transform: scale(0.98);
    box-shadow: 0 2rpx 6rpx rgba(224,176,128,0.2);
}

@keyframes focusAnim {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.form-input:focus,
.form-textarea:focus {
    animation: focusAnim 0.3s ease;
}
</style> 